<!--
 * @Description: 添加组件，蒙层对话框
 * @Author: youzi
 * @Date: 2020-05-20 14:11:14
 * @LastEditors: youzi
 * @LastEditTime: 2020-09-15 10:44:34
-->
<template>
  <a-modal
    centered
    title="物流信息"
    closable
    v-model="realVisible"
    :footer="null"
    @cancel="onClose"
    :maskClosable="false"
    :bodyStyle="bodyStyle"
    :width="800"
  >
    <a-form :form="form">
      <a-form-item v-bind="formItemLayout" label="物流公司">
        <span>{{ expressItem.expName }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="物流单号">
        <span>{{ expressItem.number }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="客服电话">
        <span>{{ expressItem.expPhone }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="快递员">
        <span>{{ expressItem.courier }}</span>
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="快递员电话">
        <span>{{ expressItem.courierPhone }}</span>
      </a-form-item>
      <a-form-item v-bind="{labelCol: { span: 0 }, wrapperCol: { span: 22 }}" label="">
        <div>
          <div class="item" v-for="(item, itemIndex) in expressItem.list" :key="itemIndex">
            <div class="item-time" :class="itemIndex == 0 ? 'item-select' : ''">{{item.time}}</div>
            <div class="item-text" :class="itemIndex == 0 ? 'item-select' : ''">{{item.status}}</div>
          </div>
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 16 }
};
export default {
  name: 'logistics',
  props: {
    visible: {
      default: false
    },
    expressItem: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      formItemLayout,
      form: this.$form.createForm(this)
    };
  },
  mounted() {},
  computed: {
    bodyStyle() {
      return {
        maxHeight: window.innerHeight * 0.8 + 'px',
        overflowY: 'scroll',
        padding: 0
      };
    },
    realVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        return val;
      }
    }
  },
  methods: {
    onClose() {
      this.$emit('close');
    }
  },
  watch: {}
};
</script>
<style scoped>
.item {
  display: flex;
  flex-direction: row;
  width: 100%;
  margin-left: 30px;
}
.item-time {
  width: 280px;
  line-height: 30px;
}
.item-text {
  width: calc(100vw - 280px);
  line-height: 30px;
}
.item-select {
  color: #2A4F94;
}
</style>
